<template>
    <div class="hello">
        {{ hello }}，{{ userName }}
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const timeWatch = new Date();
const hour = ref(timeWatch.getHours())
const userName = ref("木魅")
const hello = ref('Good Morning')

onMounted(() => {
    if (hour.value >= 4 && hour.value < 12) {
        hello.value = 'Good Morning'
    } else if (hour.value >= 12 && hour.value < 18) {
        hello.value = 'Good Afternoon'
    } else if (hour.value >= 18) {
        hello.value = 'Good Evening'
    } else {
        hello.value = 'Good Night'
    }
})

</script>

<style scoped>
.hello {
    max-width: 70%;
    width: 530px;
    position: absolute;
    top: 220px;
    left: 51%;
    transform: translateX(-50%);
    font-size: 16px;
    transition: all 1s;
    animation: fadeIn 1s;
    @apply text-light-300;
}

.dark .hello {
    @apply text-light-900;
}

@keyframes fadeIn {
    from {
        top: 250px;
    }

    to {
        top: 220px;
    }
}
</style>